<template>
  <div class="award_table">
    <el-table id="data_table"
              :data="table_data"
              stripe
              border
              style="width: 80%; margin: auto">
      <el-table-column v-for="column in columns"
                       :prop="column.prop"
                       :label="column.label"
                       sortable/>
      <el-table-column align="right" width="180px" label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              type="danger"
              @click="on_click_remove_data_button(scope.row)"
          >删除
          </el-button>
          <el-button
              size="mini"
              @click="on_click_edit_data_button(scope.row)"
          >修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button slot="reference"
               type="primary"
               icon="el-icon-circle-plus"
               id="add_data_button" @click="on_click_add_data_button">
      添加数据
    </el-button>
    <el-dialog v-model="add_data_card_visible" title="添加数据">
      <el-form ref="form"
               :model="form"
               label-width="120px"
               :rules="rules">
        <el-form-item label="学号" prop="id">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="奖项" prop="prize">
          <el-input v-model="form.prize"></el-input>
        </el-form-item>

        <el-form-item label="获奖时间" prop="name">
          <el-col :span="11">
            <el-date-picker type="month"
                            placeholder="选择日期"
                            v-model="form.date"/>
          </el-col>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="on_cancel_add_data">取消</el-button>
        <el-button type="success" @click="on_summit_add_data()">确认</el-button>
      </el-row>


    </el-dialog>

    <el-dialog v-model="edit_data_card_visible" title="修改数据">
      <el-form ref="data_to_edit"
               :model="data_to_edit"
               label-width="120px"
               :rules="rules">
        <el-form-item label="学号" prop="id">
          <el-input v-model="data_to_edit.id"></el-input>
        </el-form-item>
        <el-form-item label="奖项" prop="prize">
          <el-input v-model="data_to_edit.prize"></el-input>
        </el-form-item>
        <el-form-item label="获奖时间" prop="name">
          <el-col :span="11">
            <el-date-picker type="month"
                            placeholder="选择日期"
                            v-model="data_to_edit.date"/>
          </el-col>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="on_cancel_edit_data">取消</el-button>
        <el-button type="success" @click="on_summit_edit_data()">确认</el-button>
      </el-row>


    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "award_table",
  props: ['group_code'],
  data() {
    return {
      // group_code: 0x0001,
      object_code: this.$store.state.object_code_dir
          .type2object_code.奖项,
      table_data: [],
      add_data_card_visible: false,
      edit_data_card_visible: false,
      data_to_edit: '',

      columns: [
        {prop: 'id', label: '学号'},
        {prop: 'name', label: '姓名'},
        {prop: 'prize', label: '奖项'},
        {prop: 'date', label: '获奖时间'},
      ],
      form: {
        id: '',
        prize: '',
        date: '',
        clear() {
          this.id = this.prize = this.date = '';
        }
      },
      rules: {
        id: [
          {required: true, trigger: 'blur', message: '请输入必填项'},
          {min: 1, max: 20, message: '长度在1到20个字符之间', trigger: 'blur'}
        ],
        prize: [
          {required: true, trigger: 'blur', message: '请输入必填项'},
          {min: 1, max: 20, message: '长度在1到20个字符之间', trigger: 'blur'}
        ],
        date: [
          {required: true, trigger: 'blur', message: '请选择获奖时间'},
        ],
      }
    }
  },
  methods: {
    on_click_add_data_button() {
      this.add_data_card_visible = true
    },
    on_summit_add_data() {
      let data = {
        object_code: this.object_code, // 2表示正在添加成员
        key: this.$store.state.key,
        id: this.form.id,
        prize: this.form.prize,
        date: '' + this.form.date.getFullYear() + '-' +
            (this.form.date.getMonth() + 1)
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post(this.$store.state.post_site_dir.add_data, data)
              .then((res) => {
                if (res.data.error_code !== 0) {
                  this.$alert("提交失败！")
                  return
                }
                this.reload_table_data() // 刷新一遍，以防有新的东西加入
                this.add_data_card_visible = false;
                this.form.clear()
              })
        }
      })
    },
    on_cancel_add_data() {
      this.add_data_card_visible = false
      this.form.clear()
    },

    on_click_remove_data_button(row) {
      // index是从0开始的标号
      // row是这一行的数据
      // 弹出提示窗口确认以后再删除
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(this.$store.state.post_site_dir.remove_data,
            {
              key: this.$store.state.key,
              object_code: this.object_code,
              id: row.id,
            })
            .then((res) => {
              if (res.data.error_code === 0) {
                this.reload_table_data()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {

                this.$message({
                  type: 'info',
                  message: '删除失败，请刷新网页重试！'
                });
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    on_click_edit_data_button(row) {
      this.data_to_edit = row
      this.edit_data_card_visible = true
    },
    on_summit_edit_data() {
      let date = new Date(this.data_to_edit.date)
      let data = {
        object_code: this.object_code, // 2表示正在添加成员
        key: this.$store.state.key,
        id: this.data_to_edit.id,
        prize: this.data_to_edit.prize,
        date: '' + date.getFullYear() + '-' +
            (date.getMonth() + 1)
      }
      this.$refs.data_to_edit.validate((valid) => {
        if (valid) {
          axios.post(this.$store.state.post_site_dir.edit_data, data)
              .then((res) => {
                if (res.data.error_code !== 0) {
                  this.$alert("提交失败！")
                  return
                }
                this.init_table_data() // 刷新一下保证数据同步
                this.edit_data_card_visible = false;
              })
        }
      })
    },
    on_cancel_edit_data() {
      this.edit_data_card_visible = false
    },
    init_table_data() {
      this.$store.commit('set_key', 0xffffffff)
      this.table_data = [
        {
          id: "19373280",
          name: '李浩宇',
          prize: '校三好学生',
          date: '2021-11'
        },
        {
          id: "19370001",
          name: '黄嘉竟',
          prize: '校三好学生',
          date: '2021-11'
        },
        {
          id: "19370022",
          name: '邓奥峰',
          prize: '校优秀干部',
          date: '2021-11'
        },
        {
          id: "19370333",
          name: '缪淼淼',
          prize: '校优秀干部',
          date: '2021-11'
        },
        {
          id: "19378888",
          name: '薛静远',
          prize: '优秀团员',
          date: '2021-12'
        },
      ]
      // axios.post(this.$store.state.post_site_dir.query,
      //     {
      //       object_code: this.object_code,
      //       key: this.$store.state.key,
      //       group_code: this.group_code
      //     })
      //     .then((res) => {
      //       if (res.data.error_code !== 0) {
      //         alert("没有权限！")
      //       } else {
      //         this.table_data = res.data.data
      //       }
      //     })
    },
    refresh_data() {
      this.init_table_data()
    },

  },
  watch: {
    group_code(newValue, oldValue) {
      this.refresh_data(newValue)
    }
  },
  mounted() {
    this.init_table_data()
  },

}
</script>

<style scoped>
#data_table {
  top: 170px;
  z-index: 50;
}


#add_data_button {
  text-align: center;
  position: fixed;
  left: 10%;
  top: 100px;
  z-index: 110;
}


</style>